<template>
    <div class="home-container">
        <el-tabs type="border-card">
            <el-tab-pane label="用户管理">
                <div class="home-content">
                    <el-button type="primary" plain @click="addUser" icon="el-icon-plus">新增用户</el-button>
                    <!-- <el-button type="success" plain @click="open" icon="el-icon-edit">修改</el-button> -->
                    <el-button type="danger" plain @click="deleteUser" icon="el-icon-delete">批量删除
                    </el-button>
                </div>
                <el-table :data="tableData" border style="width: 100%" @selection-change="handleSelectionChange"
                    ref="table">
                    <el-table-column type="selection" min-width="150">
                    </el-table-column>
                    <el-table-column fixed prop="id" label="用户编号" min-width="150">
                    </el-table-column>
                    <el-table-column prop="name" label="用户名称" min-width="120">
                    </el-table-column>
                    <el-table-column prop="lastdate" label="部门" min-width="120">
                    </el-table-column>
                    <el-table-column prop="phone" label="手机号" min-width="120">
                    </el-table-column>
                    <el-table-column prop="createdate" label="创建时间" min-width="120">
                    </el-table-column>
                    <el-table-column label="操作" min-width="300">
                        <!-- slot-scope="scope" -->
                        <template slot-scope="scope">
                            <el-button size="mini" @click="openModel(scope.row, scope.$index, 2)" icon="el-icon-edit"
                                type="primary">
                                编辑
                            </el-button>
                            <el-button @click="openModel(scope.row, scope.$index, 1)" size="mini" type="success"
                                icon="el-icon-check">查看</el-button>
                            <el-button type="danger" @click.native.prevent="deleteRow(scope.$index, tableData)"
                                size="mini" icon="el-icon-delete">删除
                            </el-button>
                        </template>
                    </el-table-column>
                </el-table>
            </el-tab-pane>
            <el-tab-pane label="角色管理">
                <div class="home-content">
                    <el-button type="primary" plain @click="addPlay" icon="el-icon-plus">新增角色</el-button>
                    <el-button type="danger" plain icon="el-icon-delete" @click="deleteAllpole">批量删除</el-button>
                </div>
                <el-table :data="tableData2" border style="width: 100%" @selection-change="handleSelectionChange1"
                    ref="table">
                    <el-table-column type="selection" min-width="150">
                    </el-table-column>
                    <el-table-column fixed prop="id" label="编号" min-width="150">
                    </el-table-column>
                    <el-table-column prop="name" label="角色名称" min-width="150">
                    </el-table-column>
                    <el-table-column prop="description" label="角色描述" min-width="150">
                    </el-table-column>
                    <el-table-column label="操作" min-width="300">
                        <!-- slot-scope="scope" -->
                        <template slot-scope="scope">
                            <el-button size="mini" @click="openModel1(scope.row, scope.$index, 2)" icon="el-icon-edit"
                                type="primary">
                                编辑
                            </el-button>
                            <el-button @click="openModel1(scope.row, scope.$index, 1)" size="mini" type="success"
                                icon="el-icon-check">查看</el-button>
                            <el-button type="danger" @click.native.prevent="deleteRow(scope.$index, tableData2)"
                                size="mini" icon="el-icon-delete">删除
                            </el-button>
                        </template>
                    </el-table-column>
                </el-table>
            </el-tab-pane>

        </el-tabs>

        <!--对话框第一个-->
        <el-dialog :title="title" :visible.sync="dialogFormVisible">
            <el-form :model="modData">
                <el-form-item label="用户编号" :label-width="formLabelWidth">
                    <el-input v-model="modData.id" autocomplete="off" :readonly="readOnly"></el-input>
                </el-form-item>
                <el-form-item label="用户名称" :label-width="formLabelWidth">
                    <el-input v-model="modData.name" autocomplete="off" :readonly="readOnly"></el-input>
                </el-form-item>
                <el-form-item label="部门" :label-width="formLabelWidth">
                    <el-input v-model="modData.lastdate" autocomplete="off" :readonly="readOnly"></el-input>
                </el-form-item>
                <el-form-item label="手机号" :label-width="formLabelWidth">
                    <el-input v-model="modData.phone" autocomplete="off" :readonly="readOnly"></el-input>
                </el-form-item>
                <el-form-item label="创建时间" :label-width="formLabelWidth">
                    <el-input v-model="modData.createdate" autocomplete="off" :readonly="readOnly"></el-input>
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer" v-show="isShow">
                <el-button @click="dialogFormVisible = false">取 消</el-button>
                <el-button type="primary" @click="que">确 定</el-button>
            </div>
        </el-dialog>
        <!-- 第二个对话框 -->
        <el-dialog :title="title" :visible.sync="dialogTableVisible">
            <el-form :model="modData1">
                <el-form-item label="用户编号" :label-width="formLabelWidth">
                    <el-input v-model="modData1.id" autocomplete="off" :readonly="readOnly"></el-input>
                </el-form-item>
                <el-form-item label="角色名称" :label-width="formLabelWidth">
                    <el-input v-model="modData1.name" autocomplete="off" :readonly="readOnly"></el-input>
                </el-form-item>
                <el-form-item label="角色描述" :label-width="formLabelWidth">
                    <el-input v-model="modData1.description" autocomplete="off" :readonly="readOnly"></el-input>
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer" v-show="isShow">
                <el-button @click="dialogTableVisible = false">取 消</el-button>
                <el-button type="primary" @click="que1">确 定</el-button>
            </div>
        </el-dialog>
        <!-- 第三个对话框 -->
        <el-dialog :title="title" :visible.sync="dialogThreemVisible">
            <el-form :model="modData3">
                <el-form-item label="用户编号" :label-width="formLabelWidth">
                    <el-input v-model="modData3.id" autocomplete="off" :readonly="readOnly"></el-input>
                </el-form-item>
                <el-form-item label="用户名称" :label-width="formLabelWidth">
                    <el-input v-model="modData3.name" autocomplete="off" :readonly="readOnly"></el-input>
                </el-form-item>
                <el-form-item label="部门" :label-width="formLabelWidth">
                    <el-input v-model="modData3.lastdate" autocomplete="off" :readonly="readOnly"></el-input>
                </el-form-item>
                <el-form-item label="手机号" :label-width="formLabelWidth">
                    <el-input v-model="modData3.phone" autocomplete="off" :readonly="readOnly"></el-input>
                </el-form-item>
                <el-form-item label="创建时间" :label-width="formLabelWidth">
                    <el-input v-model="modData3.createdate" autocomplete="off" :readonly="readOnly"></el-input>
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer" v-show="isShow">
                <el-button @click="dialogThreemVisible = false">取 消</el-button>
                <el-button type="primary" @click="addUserque(modData3)">确 定</el-button>
            </div>
        </el-dialog>
        <!-- 第四个对话框 -->
        <el-dialog :title="title" :visible.sync="dialogFouremVisible">
            <el-form :model="modData4">
                <el-form-item label="编号" :label-width="formLabelWidth">
                    <el-input v-model="modData4.id" autocomplete="off" :readonly="readOnly"></el-input>
                </el-form-item>
                <el-form-item label="角色名称" :label-width="formLabelWidth">
                    <el-input v-model="modData4.name" autocomplete="off" :readonly="readOnly"></el-input>
                </el-form-item>
                <el-form-item label="角色描述" :label-width="formLabelWidth">
                    <el-input v-model="modData4.description" autocomplete="off" :readonly="readOnly"></el-input>
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer" v-show="isShow">
                <el-button @click="dialogFouremVisible = false">取 消</el-button>
                <el-button type="primary" @click="addUserque1(modData4)">确 定</el-button>
            </div>
        </el-dialog>
        <!-- 第五个对话框 -->
        <el-dialog title="提示" :visible.sync="delVisible" width="300px" center>
            <div class="del-dialog-cnt">删除不可恢复，是否确定删除？</div>
            <span slot="footer" class="dialog-footer">
                <el-button @click="delVisible = false">取 消</el-button>
                <el-button type="primary" @click="queDelete">确 定</el-button>
            </span>
        </el-dialog>
        <!-- 第六个对话框 -->
        <el-dialog title="提示" :visible.sync="del1Visible" width="300px" center>
            <div class="del-dialog-cnt">删除不可恢复，是否确定删除？</div>
            <span slot="footer" class="dialog-footer">
                <el-button @click="del1Visible = false">取 消</el-button>
                <el-button type="primary" @click="queDelete1">确 定</el-button>
            </span>
        </el-dialog>
    </div>
</template>

<script>
export default {
    name: 'userPerManger',
    data() {
        return {
            title: '查看数据',
            readOnly: false,
            isShow: true,
            tableData: [{
                id: '001',
                name: '李芳',
                lastdate: '财务部',
                phone: '18736272991',
                createdate: '2022-07-03',

            }, {
                id: '002',
                name: '李明',
                lastdate: '人事部',
                phone: '13436272991',
                createdate: '2020-07-02',
            }, {
                id: '003',
                name: '张三',
                lastdate: '网络部',
                phone: '19036272991',
                createdate: '2019-07-01',
            }, {
                id: '004',
                name: '王菲',
                lastdate: '科技部',
                phone: '15736272991',
                createdate: '2022-07-04',
            }],
            tableData2: [{
                id: '001',
                name: '主管',
                description: '技术负责人',
            }, {
                id: '002',
                name: '测试角色',
                description: '技术负责人',
            }, {
                id: '003',
                name: '测试角色2',
                description: '技术负责人',
            }, {
                id: '004',
                name: '经理',
                description: '技术负责人',
            }],
            modData: [],
            modData1: [],
            modData3: {
                id: '',
                name: '',
                lastdate: '',
                phone: '',
                createdate: '',
            },
            modData4: {
                id: '',
                name: '',
                description: '',
            },
            dialogFormVisible: false,
            dialogTableVisible: false,
            dialogThreemVisible: false,
            dialogFouremVisible: false,
            delVisible: false,
            del1Visible: false,
            formLabelWidth: '140px',
            currentIndex: 0,
            // 被选中的列表记录
            multipleSection: [],
            multipleSection1: [],
            delarr: [],
            delarr1: [],
        }
    },
    created() {
        this.open = this._.debounce(this.click, 1000, { leading: true, trailing: false })
    },
    unmounted() {
        this.open.cancel()
    },
    beforeUpdate() {
        this.$nextTick(() => {
            this.$refs.table.doLayout()
        })
    },
    methods: {
        // 一键部署
        oneClickDeploy() {
            this.$alert('是否部署默认网络结构', '一键部署提示', {
                confirmButtonText: '确定',
                center: true,
                type: 'warning',
                callback: () => {
                    this.$message({
                        type: 'success',
                        message: '一键部署成功',
                    })
                },
            })
        },
        handleClick(row) {
        },
        click(e) {
            this.$message.success(e)
        },
        // 删除行按钮
        deleteRow(index, rows) {
            this.$confirm('此操作将永久删除该行数据, 是否继续?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning',
            }).then(() => {
                rows.splice(index, 1)
                this.$message({
                    type: 'success',
                    message: '删除成功!',
                })
            }).catch(() => {
                this.$message({
                    type: 'info',
                    message: '已取消删除',
                })
            })
        },
        openModel(row, index, flag) {
            this.dialogFormVisible = true
            this.modData = row
            this.currentIndex = index
            this.title = flag == 1 ? '查看用户' : '修改用户'
            this.readOnly = flag == 1
            this.isShow = !(flag == 1)
        },
        openModel1(row, index, flag) {
            this.dialogTableVisible = true
            this.modData1 = row
            this.currentIndex = index
            this.title = flag == 1 ? '查看角色' : '修改数据'
            this.readOnly = flag == 1
            this.isShow = !(flag == 1)
        },
        // 确认修改
        que() {
            this.tableData.splice(this.currentIndex, 1, this.modData)
            this.dialogFormVisible = false
        },
        que1() {
            this.tableData2.splice(this.currentIndex, 1, this.modData1)
            this.dialogTableVisible = false
        },
        // 添加用户
        addUser() {
            this.dialogThreemVisible = true
        },
        handleSelectionChange(val) {
            this.multipleSelection = val
        },
        handleSelectionChange1(val) {
            this.multipleSection1 = val
        },
        // 批量用户
        deleteUser() {
            this.delVisible = true
            const length = this.multipleSelection.length
            for (let i = 0; i < length; i++) {
                this.delarr.push(this.multipleSelection[i].id)
            }
            // this.delVisible = false
        },
        // 确认删除
        queDelete() {
            let newarr = []
            for (let i = 0; i < this.tableData.length; i++) {
                if (!this.delarr.includes(this.tableData[i].id)) {
                    newarr.push(this.tableData[i])
                }
            }
            this.tableData = newarr
            this.delVisible = false
        },
        deleteAllpole() {
            this.del1Visible = true
            const length = this.multipleSection1.length
            for (let i = 0; i < length; i++) {
                this.delarr1.push(this.multipleSection1[i].id)
            }
            // this.delVisible = false
        },
        queDelete1() {
            let newarr = []
            for (let i = 0; i < this.tableData2.length; i++) {
                if (!this.delarr1.includes(this.tableData2[i].id)) {
                    newarr.push(this.tableData2[i])
                }
            }
            this.tableData2 = newarr
            this.del1Visible = false
        },
        // 点击确定添加成功
        addUserque(modData3) {
            // console.log('ee', modData3)
            this.tableData.unshift(modData3)
            this.dialogThreemVisible = false
        },
        addUserque1(modData4) {
            this.tableData2.unshift(modData4)
            this.dialogFouremVisible = false
        },
        addPlay() {
            this.dialogFouremVisible = true
        },
    },
}
</script>

<style scoped>
.home-container {
    padding: 10px;
    padding-top: 5px;
}

.home-content {
    display: flex;
    padding: 10px;
    border-radius: 5px;
    background: 编号fff;
    position: relative;


}
</style>
<style>
.home-container .el-upload-list {
    position: absolute;
    right: 20px;
    top: 0;
}

.home-container .el-message-box .el-message-box__content {
    line-height: 60px;
    text-align: center;
}
</style>